<template>
  <section class="album">
    <div class="album-inner">
      <el-row :gutter="15">
        <el-col :span="7">
          <div class="designer">
            <el-avatar
              :src="avatarSrc"
              :size="80"
            ></el-avatar>
            <div class="designer-info">
              <h3>
                张三丰
                <small>设计师</small>
              </h3>
              <p>平面作品/摄影 | 520个作品</p>
              <el-button size="small" icon="el-icon-view" plain type="primary">点击关注</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="designer-works">
            <el-image :src="src1" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src2" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src3" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src4" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src5" style="height:120px;" fit="cover"></el-image>
          </div>
        </el-col>
      </el-row>
       <el-row :gutter="15">
        <el-col :span="7">
          <div class="designer">
            <el-avatar
              :src="avatarSrc"
              :size="80"
            ></el-avatar>
            <div class="designer-info">
              <h3>
                张三丰
                <small>设计师</small>
              </h3>
              <p>平面作品/摄影 | 520个作品</p>
              <el-button size="small" icon="el-icon-view" plain type="primary">点击关注</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="designer-works">
            <el-image :src="src1" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src2" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src3" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src4" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src5" style="height:120px;" fit="cover"></el-image>
          </div>
        </el-col>
      </el-row>
       <el-row :gutter="15">
        <el-col :span="7">
          <div class="designer">
            <el-avatar
              :src="avatarSrc"
              :size="80"
            ></el-avatar>
            <div class="designer-info">
              <h3>
                张三丰
                <small>设计师</small>
              </h3>
              <p>平面作品/摄影 | 520个作品</p>
              <el-button size="small" icon="el-icon-view" plain type="primary">点击关注</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="designer-works">
            <el-image :src="src1" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src2" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src3" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src4" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src5" style="height:120px;" fit="cover"></el-image>
          </div>
        </el-col>
      </el-row>
       <el-row :gutter="15">
        <el-col :span="7">
          <div class="designer">
            <el-avatar
              :src="avatarSrc"
              :size="80"
            ></el-avatar>
            <div class="designer-info">
              <h3>
                张三丰
                <small>设计师</small>
              </h3>
              <p>平面作品/摄影 | 520个作品</p>
              <el-button size="small" icon="el-icon-view" plain type="primary">点击关注</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="designer-works">
            <el-image :src="src1" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src2" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src3" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src4" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src5" style="height:120px;" fit="cover"></el-image>
          </div>
        </el-col>
      </el-row>
       <el-row :gutter="15">
        <el-col :span="7">
          <div class="designer">
            <el-avatar
              :src="avatarSrc"
              :size="80"
            ></el-avatar>
            <div class="designer-info">
              <h3>
                张三丰
                <small>设计师</small>
              </h3>
              <p>平面作品/摄影 | 520个作品</p>
              <el-button size="small" icon="el-icon-view" plain type="primary">点击关注</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="designer-works">
            <el-image :src="src1" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src2" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src3" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src4" style="height:120px;" fit="cover"></el-image>
            <el-image :src="src5" style="height:120px;" fit="cover"></el-image>
          </div>
        </el-col>
      </el-row>
    </div>
  </section>
</template>

<script>
export default {
  name: "Rookie", //设计新秀
  data() {
    return {
      avatarSrc: require("@/assets/images/tuyibo-photo.jpg"),
      src1: require("@/assets/images/covers/1.jpg"),
      src2: require("@/assets/images/covers/2.jpg"),
      src3: require("@/assets/images/covers/3.jpg"),
      src4: require("@/assets/images/covers/4.jpg"),
      src5: require("@/assets/images/covers/5.jpg"),
      src6: require("@/assets/images/covers/6.jpg"),
      src7: require("@/assets/images/covers/7.jpg")
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.album {
  margin-bottom: 24px;
  .album-inner{
    >.el-row+.el-row{margin-top:24px;border-top:1px solid @color-border;padding-top:24px;}
  }
  .designer {
    display: flex;
    .el-avatar{flex:0 0 80px;margin-right:16px;}
    h3 {
      font-weight: 600;
      font-size: 24px;margin-bottom:8px;
      >small{font-weight: 400;font-size:14px;}
    }
    p{color:@color-subsidiary;margin-bottom:24px;font-size:12px;}
  }
  .designer-works {
    display: flex;
    align-items: center;margin-left:-8px;margin-right:-8px;overflow: hidden;
    .el-image {
      margin: 0 8px;
    }
  }
}
</style>
